<template>
  <el-tooltip effect="light" placement="top" :disabled="disabled" v-if="value">

    <template v-slot:content>
      <img ref="extra_barcode_image" v-if="extra_barcode_image" />
      <div :style="{ 'text-align': extra_text_align, 'max-width': '400px' }">{{ value }}</div>
      <div class="flex_center">
        <el-button size="mini" type="text" @click="copyTo(`copy_${copy_id}_${data_type}_${data_id}`)">
          {{ $tt('label_copy') }}
        </el-button>
      </div>
    </template>
    <div :class="{ position_relative: ellipsis}">
      <!-- <div v-if="position_relative">&nbsp;</div> -->
      <div :id="`copy_${copy_id}_${data_type}_${data_id}`" :class=" { code_div: true, text_ellipsis: ellipsis } ">
        {{ value }}
      </div>
    </div>
  </el-tooltip>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
  data() {
    return {
      disabled: false,
      copy_id: Math.random().toString(),
    }
  },
  props: {
    ellipsis: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    extra_text_align: {
      type: String,
      default: 'start'
    },
    extra_text: {
      type: Boolean,
      default: true
    },

    extra_barcode_image: {
      type: Boolean,
      default: false
    },
    data_type: {
      type: String,
      default: '',
    },
    data_id: {
      type: [String, Number],
      default: '',
    },
  },
  created() {
    //原生

    const val = this.value
    if (val && this.extra_barcode_image) {
      if (this.$reg.Code128(val)) {
        this.$nextTick(() => {
          JsBarcode(this.$refs.extra_barcode_image, val, {
            format: "CODE128",
            displayValue: false,
            fontSize: 14,
            // height: 100
          });
        })
      }
    }
  },
  watch: {
    value: function (val) {
      if (val && this.extra_barcode_image) {
        if (this.$reg.Code128(val)) {
          this.$nextTick(() => {
            JsBarcode(this.$refs.extra_barcode_image, val, {
              format: "CODE128",
              displayValue: false,
              fontSize: 14,
              // height: 100
            });
          })
        }
      }
    },
  },
  methods: {
    mouseenter() {
      // this.disabled = false
    },
    copyTo(dom_id) {

      this.$copyToClip(this.value, this.$tt('label_has_copy'))
      // if (this.$tool.copyTextToClipboard(dom_id)) {
      //   this.$message.success(this.$tt('label_has_copy'))

      // }
    },
  },
}
</script>
<style scoped>
.text_ellipsis {
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.el-descriptions-item__content>.position_relative {
  position: relative;
  width: 100%;
}

.el-descriptions-item__content>.position_relative>.code_div {
  width: 100%;
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0; */
}
</style>
